<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的粉丝 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>


<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <div class="one wide column"></div>
        <!--左侧菜单栏-->
        <div th:replace="~{ fragment/personInfo-manage-sidebar::sidebar}"></div>
        <!--博客内容-->
        <div class="twelve wide column">
            <div class="ui top attached segment stackable">
                <div th:if="${attentionInfo!=null&&#lists.size(attentionInfo)<=0}" class="ui attached segment border-none "  style="padding-bottom: 0 !important;border-bottom: 1px solid grey !important;" >
                    <h3 class="m-margin-top m-margin-bottom m-margin-left m-inline-block" style="font-weight: bold !important;font-size: 20px !important;color: #3d3d3d !important;">
                        我的粉丝</h3>
                    <div class="right aligned column m-inline-block m-mobile-margin-left">
                        共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${#lists.size(attentionInfo)}"> 14 </h2> 人
                    </div>
                </div>

                <div th:if="${attentionInfo!=null&&#lists.size(attentionInfo)>0}" class="ui attached segment border-none "  style="padding-bottom: 0 !important;" >
                    <h3 class="m-margin-top m-margin-bottom m-margin-left m-inline-block" style="font-weight: bold !important;font-size: 20px !important;color: #3d3d3d !important;">
                        我的粉丝</h3>
                    <div class="right aligned column m-inline-block m-mobile-margin-left">
                        共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${#lists.size(attentionInfo)}"> 14 </h2> 人
                    </div>
                </div>

                <div th:if="${!#lists.isEmpty(attentionInfo)}" th:each="attention:${attentionInfo}" class="ui attached segment border-none" style="border-top: 1px solid grey !important;;padding-bottom: 5px !important;">
                    <img th:src="${attention.getUserInfo().get('user').getUserHeaderImgUrl()}" class="ui avatar medium  image image-50x50" style="max-height: none !important;"
                         src="http://hbimg.b0.upaiyun.com/1f20743f57decb129f4563314eafca4f83f7a18d105ac-xpHDBI_fw658">
                    <span th:text="${attention.getUserInfo().get('user').getUserNickname()}">用户名</span>
                </div>

                <div style="height: 30em !important;" th:if="${#lists.size(attentionInfo)==0}" class="ui bottom attached segment border-none" >
                    <div class="ui middle aligned two column grid"
                         style="padding-top: 0 !important;padding-bottom: 0 !important;">
                        <div style="margin: 10em auto !important;float: left !important;"><span style="color: grey !important;">当前没有任何粉丝</span></div>
                    </div>
                </div>

                <div style="padding-bottom: 20em !important;"></div>
            </div>
        </div>
    </div>

</div>


<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script>
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
    });
</script>
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    })

</script>
<script>
    $('#side-fans').css("background","#ca0c16");
    $('#side-fans').css("color","#ffffff")
</script>
</html>